<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <h1>{{count}}</h1>

    <!-- 使用组件 -->
    <login title="我是title" @aa="testParent" @bb="testParent2" @cc="testParent3" @dd="testParent4"></login>


</div>
</body>
</html>

<script src="../js/v2.6.10/vue.js"></script>
<script>

    const login = {
        template: `
          <div><h2>登录局部组件{{ title }}</h2>
          <button @click="testChild">点我去调父组件中的某个事件方式一</button>
          <button @click="$emit('aa')">点我去调父组件中的某个事件方式二</button>
          <br>
          <button @click="$emit('cc',20,'男')">点我去调父组件中的某个事件并传参数</button>
          <br>
          <button @click="$emit('dd',{name:'hhl',sex:'男',count:88})">点我去调父组件中的某个事件并传对象</button>
          <br>

          </div>`,
        data() {//用来给当前组件
            return {
                count: 10,
                loginTitle: this.title
            }
        },
        props: ['title'],//用来接收父组件给当前组件传递数据
        methods: {
            testChild() {
                alert('我是子组件中定义事件');
                console.log(this);
                this.$emit('aa');//调用父组件传递过来的事件  参数1：调用事件名
                this.$emit('bb');
            }
        }
    }

    const app = new Vue({
        el: "#app",
        data: {
            count:0
        },
        methods: {
            testParent() {
                alert('我是父组件上面的事件')
            },
            testParent2() {
                alert('我是父组件上面的事件2')
            },
            testParent3(count,sex) {
                alert('我是父组件上面的事件3,传递参数');
                console.log("parent:",count);
                console.log("parent:",sex);
                this.count = count;
            },
            testParent4(user){
                alert(JSON.stringify(user));
                this.count = user.count;
            }

        },
        components: {
            //注册局部组件
            login
        }
    });

</script>